<template>
  <div>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="包裹1" name="1">
        <el-row class="my-card">
          <el-col :span="24">
            <div class="card-col">
              <span class="space">发货方式：</span
              >{{ forrmatterEnmu(deliveryType, info.deliveryType) }}
            </div>
          </el-col>
          <el-col :span="24">
            <div class="card-col">
              <span class="space">发货时间：</span>{{ info.sendTime }}
            </div>
          </el-col>
          <el-col :span="24">
            <div class="card-col">
              <span class="space">物流公司：</span>{{ info.logisticsCompany }}
            </div>
          </el-col>
          <el-col :span="24">
            <div class="card-col">
              <span class="space">运单编号：</span>
              {{ info.lid }}
              <!-- <el-button
                type="text"
                size="mini"
                style="margin-left: 10px"
                @click="expressShow = true"
                >修改物流</el-button
              > -->
            </div>
          </el-col>
          <el-col :span="24">
            <div class="card-col">
              <span class="space">包裹商品：</span>
              <div style="display: flex; align-items: center">
                <image-preview
                  :src="list[0].goodImg"
                  width="50px"
                  height="50px"
                  style="margin-right: 10px"
                ></image-preview>
                <div>
                  <div>{{ list[0].goodName }}</div>
                  <div>
                    数量：<span style="color: red">{{
                      list[0].goodCount
                    }}</span>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="card-col">
              <span class="space">物流状态：</span>
              <span style="color: #59ce84">
                {{ forrmatterEnmu(orderStatus, info.orderStatus) }}</span
              >
            </div>
            <div class="logistics">
              <el-steps direction="vertical" :active="1">
                <el-step v-for="(item, i) in goodList" :key="i">
                  <span slot="icon">
                    <span class="icon">●</span>
                  </span>
                  <span slot="title" class="title"
                    >【{{ item.Location }}】{{ item.Acceptstation }}</span
                  >
                  <span slot="description" class="description">{{
                    item.AcceptTime
                  }}</span>
                </el-step>
              </el-steps>
            </div>
          </el-col>
          <!-- <el-col :span="24">
            <div class="card-col">
              <span class="space">操作：</span
              ><el-button type="text" size="mini">取消发货</el-button>
            </div>
          </el-col> -->
        </el-row>
      </el-tab-pane>
    </el-tabs>

    <!-- <el-dialog title="基本信息" :visible.sync="expressShow" width="70%">
      <express-info
        :info="info"
        :list="list"
        @close="expressShow = false"
      ></express-info>
    </el-dialog> -->
  </div>
</template>

<script>
// import ExpressInfo from "./expressInfo.vue";
import { getOrderPhysicalDistribution } from "@/api/system/order/manage.js";
import { forrmatterEnmu } from "@/utils/index";
export default {
  name: "Logistics",
  // components: { ExpressInfo },
  props: ["info", "list"],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 步骤条数据
      goodList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        goodId: null,
      },
      activeName: "1",
      // expressShow: false,
      deliveryType: [
        {
          name: "普通配送",
          value: 1,
        },
        {
          name: "加急配送",
          value: 2,
        },
      ],
      orderStatus: [
        {
          name: "待发货",
          value: 1,
        },
        {
          name: "配送中",
          value: 2,
        },
        {
          name: "待收货",
          value: 3,
        },
        {
          name: "已完成",
          value: 4,
        },
        {
          name: "已退单",
          value: 5,
        },
        {
          name: "已关闭",
          value: 6,
        },
        {
          name: "退款中",
          value: 7,
        },
      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    forrmatterEnmu,
    /** 查询供应商商品列表 */
    getList() {
      this.loading = true;
      getOrderPhysicalDistribution(this.$route.query.id).then((response) => {
        this.goodList = [...response.rows];
        this.total = response.total;
        this.loading = false;
      });
    },
  },
};
</script>
<style lang="less" scoped>
.my-card {
  font-size: 13px;

  .card-col {
    margin: 10px 0;
    display: flex;
    align-items: center;

    .space {
      display: inline-block;
      width: 80px;
      text-align: right;
      margin-right: 14px;
    }
  }
}
.logistics::v-deep {
  .el-step__icon {
    border: none !important;
  }
  .icon {
    font-size: 25px;
  }

  .title {
    color: #000;
    font-size: 12px;
    font-weight: bold;
  }
  .description {
    color: #000;
    font-size: 12px;
    opacity: 0.6;
  }
}
</style>
